<style lang="less" scope>
  @import "../assets/css/config.less";
  .func-button-group{
    position: fixed;
    width: 50px;
    right: 30px;
    bottom: 50px;
    z-index: 100;
    // border: 1px solid #E8EBEF;
    // border-bottom: none;
    font-size: 13px;
    .button{
      width: 50px;
      height: 50px;
      border: 1px solid #E8EBEF;
      background-color: @white;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000;
      margin: 0;
      transition: opacity 0.3s ease-out;
      &:hover{
        background-color: @color2;
        color: @white;
        transition: all .5s;
      }
      .font{
        line-height: 50px;
        margin: 0;
        text-align: center;
        width: 50px;
        font-size: 14px;
      }
      .back{
        width: 36px;
        line-height: 16px;
      }
    }
  }
</style>

<template>
  <div>
    <div class="func-button-group">
      <div v-for="item in list" :key="item.name" @mouseover="flag=item.name" @mouseleave="flag=''" @click="onClick(item.name)">
        <div class="button" :style="item.name!=='goTop' || scrollTop?'opacity: 1;cursor: pointer;':'opacity: 0;cursor: default;pointer-events: none;'">
        <!-- <div class="button"> -->
          <Icon v-if="item.icon&&flag!==item.name" :class="item.icon" class="icon"  size="26"/>
          <p class="font" v-else-if="(!item.icon)&&flag!==item.name">{{ item.title}}</p>
          <p class="back" v-else>{{ item.back}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      flag: ''
    }
  },
  props: ['list', 'scrollTop'],
  methods: {
    onClick(data){
      this.$emit('onClick', data)
    }
  }
}
</script>